<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" name="viewport">
    <meta content="webkit" name="renderer">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no"/>
    <meta content="email=no" name="format-detection"/>
    <meta name="keywords" content="重庆,长安,无人驾驶"/>
    <meta name="description" content="长安无人驾驶证书"/>
    <title>长安无人驾驶证书</title>
    <link rel="stylesheet" href="../css/loaders.min.css">
    <link rel="stylesheet" href="../css/diploma.css">
    <link rel="stylesheet" href="../css/crop.css">
    <link rel="stylesheet" href="../css/cropper.min.css">
    <script src="../node_modules/compass/core/webapp.js?__inline"></script>

    <style>
        .loading-ui {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .6);
            z-index: 99;
        }

        .loading-open {
            background-color: #000;
        }

        .loading-ui .loaded {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            /*width: 10px;*/
            /*height: 30px;*/
            margin: auto;
        }
    </style>
</head>
<body>

<div class="loading-ui loading-open" id="loading">
<div data-loader="ball-rotate" class="loaded"></div>
</div>

<div id="diploma" class="diploma" v-cloak>

    <app-column :is-img="isImg" :show="shareState" v-on:share="shareClick"></app-column>

    <!--<div class="diploma-title" @click="saveImage"></div>-->
    <img src="../images/diploma/diploma_title@3x.png" class="diploma-title">
    <img src="../images/diploma/diploma_star@3x.png" class="diploma-top" ref="star">
    <div class="diploma-middle">
        <img src="../images/diploma/diploma_box@3x.png" class="diploma-middle-box">
        <div class="diploma-middle-portrait" @click="cropClick($event)">
            <img src="../images/diploma/diploma_halo@3x.png" class="diploma-middle-portrait-halo">
            <transition name="bounce">
                <img :src="base64" class="diploma-middle-portrait-header" v-if="base64" key="img1">
                <img src="../images/diploma/diploma_header@3x.png" class="diploma-middle-portrait-header" v-else
                     key="img2">
            </transition>

            <!--<div class="diploma-middle-portrait-header">-->
            <!--<transition name="bounce">-->
            <!--<img :src="option.field_result.base64" class="diploma-middle-portrait-img" v-if="option.field_result.base64" key="img1">-->
            <!--<img src="../images/diploma/diploma_header@3x.png" class="diploma-middle-portrait-upload" v-else key="img2">-->
            <!--</transition>-->
            <!--</div>-->
            <!--<input v-crop="{data:option,loadingState:loadingState}" type="file" accept="*/image"-->
            <!--class="diploma-middle-portrait_input" @change="readImage($event)"> -->
            <!--<input :disabled="!inApp" @change="readImage($event)" @click="cropClick($event)" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" class="diploma-middle-portrait_input">-->
        </div>
        <h2 class="diploma-middle-title">长安出行智能无人驾驶</h2>
        <div class="diploma-middle-content">
            <div class="diploma-middle-cleft diploma-middle-color">
                <h5 class="dmc-title">出行次数</h5>
                <p class="dmc-number">{{tavelt}}次</p>
            </div>
            <div class="diploma-middle-cright diploma-middle-color">
                <h5 class="dmc-title">无人驾驶</h5>
                <p class="dmc-number">{{kilometre}}公里</p>
            </div>
        </div>
    </div>
    <div class="diploma-footer">
        <transition name="qrCode">
            <!--<img src="http://oss-ccclubs.oss-cn-hangzhou.aliyuncs.com/image/20180402194845198.png" v-if="qrCode" class="diploma-footer-code">-->
            <img src="http://121.199.48.226:8088/images/share.jpg" class="diploma-footer-code">
            <!--<img :src="qrCode" v-if="qrCode" class="diploma-footer-code">-->
        </transition>
        <div class="diploma-footer-chapter">
            <p class="dfc-word">长安出行委员会</p>
            <p class="dfc-word">{{currentDate}}</p>
        </div>

    </div>


    <transition name="crop">
        <div class="m-crop" v-if="croppable">
            <div class="m-crop-wapr">
                <div class="m-crop-btn m-crop-top">
                    <a @click="cropEnlarge" href="javascript:;" class="m-crop-icon m-crop-btn_enlarge"></a>
                    <a @click="cropNarrow" href="javascript:;" class="m-crop-icon m-crop-btn_narrow"></a>
                    <a @click="cropRotate" href="javascript:;" class="m-crop-icon m-crop-btn_rotate"></a>
                </div>
                <div class="m-crop-btn m-crop-footer">
                    <a @click="cropCancel" href="javascript:;" class="m-crop-btn_cancel">取消</a>
                    <a @click="cropChoice" href="javascript:;" class="m-crop-btn_choice">确定</a>
                </div>

            </div>
            <img ref="cropImg" src="../images/mod_zw.png">
        </div>
    </transition>

</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="../js/polyfill.min.js"></script>
<script src="../js/vue.min.js"></script>
<!--remove trigger="@release != 3"-->
<script src="../js/vue.js"></script>
<!--/remove-->
<script src="../js/vue-resource.min.js"></script>
<script src="../js/anime.min.js"></script>
<script src="../js/crop.min.js"></script>
<script src="../js/lrz.bundle.js"></script>
<script src="../js/html2canvas.min.js"></script>
<script src="../js/diploma.js"></script>
</body>
</html>